<template>
  <form-create :rule="rule" :option="options" v-model="formData" v-model:api="fApi" />
</template>

<script setup lang="ts">
import { betweenDay } from '@/utils/formatTime'

const fApi = ref({})
const formData = ref({
  // 'goods_name': 'hahaha'
})
const options = ref({
  form: {
    // disabled: true // 能控制一部分组件，有些自定义组件需要单独设置disabled props
  },
  // 表单提交事件
  onSubmit: function (_formData) {
    alert(JSON.stringify(_formData))
    alert(JSON.stringify(formData.value))
  },
  resetBtn: { show: true, innerText: '重置' }
})
const rule = ref([
  {
    type: 'input',
    field: 'goods_name',
    title: '商品名称',
    value: 'form-create',
    col: {
      span: 12,
      // labelWidth: 100
    },
    validate: [{ type: 'string', required: true, message: '商品名称必填' }]
  },
  {
    type: 'checkbox',
    field: 'label',
    title: '标签',
    value: [0, 1, 2],
    options: [
      { label: '好用', value: 0 },
      { label: '快速', value: 1 },
      { label: '高效', value: 2 },
      { label: '全能', value: 3 }
    ]
  },
  {
    type: 'UploadImg',
    field: 'goods_img',
    title: '商品封面图',
    value: '',
    props: {
      width: '100px',
      height: '100px'
    }
  },
  {
    type: 'UploadImgs',
    field: 'goods_imgs',
    title: '商品图片',
    value: [],
    props: {
      width: '100px',
      height: '100px'
    }
  },
  {
    type: 'UploadFile',
    field: 'goods_files',
    title: '商品文件',
    value: [],
    props: {
    }
  },
  {
    type: 'Editor',
    field: 'goods_desc',
    title: '商品描述',
    value: '',
  },
  {
    type:"switch",
    title:"禁用editor",
    field:"disable_desc",
    value:"1",
    props: {
      activeValue:"1",
      inactiveValue:"0",
    },
    update: function (val, _rule, api) {
      if (val == '1') {
        api.getRule('goods_desc').props.disabled = false
      } else {
        api.getRule('goods_desc').props.disabled = true
      }
    }
  },
  {
    type: 'DatePicker',
    field: 'section_day',
    title: '活动日期',
    value: ['2021-02-20', '2021-02-25'],
    props: {
      type: 'daterange',
      placeholder: '请选择活动日期'
    }
  },
  {
    type: 'hidden',
    field: 'days',
    value: '',
    link: ['section_day'],
    update: function (_val, rule, api) {
      const dates = api.getValue('section_day')
      rule.value = betweenDay(dates[0], dates[1])
    }
  }
])
</script>

<style scoped lang="scss"></style>
